<template>
  <div class="home_index">
    <div class="page_top">
      <div class="top_info">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item >首页</el-breadcrumb-item>
          <el-breadcrumb-item>主页</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="info_title">主页</div>
      </div>
    </div>
    <div class="page_con">
      <!-- 在子组件得dom上定义这个@emit方法  后面得是调父组件得那个方法-->
      <p style="margin-bottom:10px">父组件val值：{{val}}（通过子组件发送事件改变）</p>
      <zujian @checkV="zujianCheckV"></zujian>     
       <zujian2></zujian2>
    </div>
    
  </div>
</template>
<script>
import zujian from './components/zujian'
import zujian2 from './components/zujian2'
import { mapActions, mapGetters, mapMutations } from "vuex";  //vuex得各个方法   mapGetters放在computed里面 之后可以在当前页面用 this.userInfo 使用这个全局变量
export default {
  name: "index",
  data(){
    return {
      val:'你好',
    }
  },
  components:{      //声明组件
    zujian,
    zujian2
  },
  created(){  
    
  },
  mounted(){
    // console.log($('.top_info').height());
  },
  computed:{
    ...mapGetters({
      userInfo:"getUserInfo",
    }),
    
  },
  methods:{     //放一些函数(方法)      ... 为扩展运算符相当于是添加到这个对面里面去  this.getData() 使用这个方法  this.getNumber() 一样得意思 
    ...mapMutations({           
    }),
    ...mapActions({
      getNumber:'loginModule/getNumber',
    }),
    //因为子组件传了个参数 父组件就接收   这个方法只能子组件给父组件发送事件, 父组件通过去接收,但是兄弟组件,或者说,隔代组件,就爷爷辈想直接发送事件接受就不行  
    //第二种就要用到一个小技巧 在main里面再生成一个vue实例,这样整个项目都是在那个vue实例里面
    zujianCheckV(val){
      console.log(val,'父组件打印子组件传过来得参数,或者说子组件调用父组件方法');
      this.val=val;
    }
  },
}
</script>           
<style lang="scss" scoped>  
// scoped 只在这个页面有效得css样式  不污染全局
.page_con{
  color: #999;
}
</style>